<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* ul表示立方体 */
    ul {
      position: relative;
      list-style: none;
      width: 300px;
      height: 300px;
      /* border: 1px solid #000; */
      margin: 200px auto;
      /*  让li标签有近大远小的视觉效果，给ul设置视距  */
      /* perspective: 1000px; */

      /* 
        如果需要让元素变成一个真正的3d立体元素
       */
      transform-style: preserve-3d;

      /* 为了让ul慢慢的转，过渡 */
      transition: 3s;
    }

    /* 当ul整体被hover之后，让立方体整体ul旋转 */
    ul:hover {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }

    /* li表示每个面 */
    li {
      /* 子绝父相 */
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 300px;
    }

    /* 
      立方体的每一个面的思路：
        1、先旋转到面朝对应的方向
        2、沿着面朝的方向z轴方向进行平移即可
     */
    /* ---------------------------------------------前面 */
    ul li:nth-child(1) {
      /* 前面：
          1、沿着z轴方向平移150px
       */
      transform: translateZ(150px);
      background-color: red;
    }
    /* ---------------------------------------------后面 */
    ul li:nth-child(2) {
      /* 后面
        1、沿着z轴的负方向平移150px
       */
      transform: translateZ(-150px);
      background-color: #000;
    }
    /* ---------------------------------------------上面 */
    ul li:nth-child(3) {
      /* 
        上面：
          1、先旋转到面朝上面
          2、沿着z轴方向平移150px
       */
      transform: rotateX(90deg) translateZ(150px);
      background-color: yellow;
    }
    /* ---------------------------------------------下面 */
    ul li:nth-child(4) {
      /* 
        下面：
          1、先旋转到面朝下
          2、沿着z轴方向平移150px
       */
      transform: rotateX(-90deg) translateZ(150px);
      background-color: green;
    }
    /* ---------------------------------------------左面 */
    ul li:nth-child(5) {
      /* 
        左面
          1、先旋转到面朝左
          2、沿着z轴方向平移150px
       */
      transform: rotateY(-90deg) translateZ(150px);
      background-color: skyblue;
    }
    /* ---------------------------------------------右面 */
    ul li:nth-child(6) {
      /* 
        右面：
          1、先旋转到面朝右
          2、沿着z轴方向平移150px
       */
      transform: rotateY(90deg) translateZ(150px);
      background-color: pink;
    }
    img{
      width: 100%;
      height: 100%;
    }

  </style>
</head>
<body>
  <!-- ul：表示大盒子——》立方体 -->
  <!-- li：表示小盒子——》立方体的每个面 -->
  <ul>
    <li>
      <img src="./images/01.jpg" alt="">

    </li>
    <li><img src="./images/02.jpg" alt=""></li>
    <li><img src="./images/03.jpg" alt=""></li>
    <li><img src="./images/04.jpg" alt=""></li>
    <li><img src="./images/05.jpg" alt=""></li>
    <li><img src="./images/01.jpg" alt=""></li>
  </ul>
</body>
</html>